import React, { Component } from 'react'
import classnames from 'classnames'
import propTypes from 'prop-types' //组件传值类型校验

export default class Main extends Component {
  onChange = (e) => {
    this.props.checkAll(e.target.checked)
  }
  render() {
    const { list, onDel, changeStatus, condition } = this.props
    const doneCount = list.reduce((pre, todo) => {
      return pre + (todo.checked ? 1 : 0)
    }, 0)
    console.log(doneCount)
    const total = list.length
    console.log(total)
    const li = list.map((item) => {
      if (condition === 'All') {
        return (
          <li
            className={classnames({
              completed: item.checked,
            })}
            key={item.id}
          >
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.checked}
                onChange={() => {
                  changeStatus(item.id)
                }}
              />
              <label>{item.content}</label>
              <button
                className="destroy"
                onClick={() => {
                  onDel(item.id)
                }}
              ></button>
            </div>
            <input className="edit" />
          </li>
        )
      }
      if (condition === 'Active' && item.checked === false) {
        return (
          <li
            className={classnames({
              completed: item.checked,
            })}
            key={item.id}
          >
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.checked}
                onChange={() => {
                  changeStatus(item.id)
                }}
              />
              <label>{item.content}</label>
              <button
                className="destroy"
                onClick={() => {
                  onDel(item.id)
                }}
              ></button>
            </div>
            <input className="edit" />
          </li>
        )
      }
      if (condition === 'Completed' && item.checked === true) {
        return (
          <li
            className={classnames({
              completed: item.checked,
            })}
            key={item.id}
          >
            <div className="view">
              <input
                className="toggle"
                type="checkbox"
                checked={item.checked}
                onChange={() => {
                  changeStatus(item.id)
                }}
              />
              <label>{item.content}</label>
              <button
                className="destroy"
                onClick={() => {
                  onDel(item.id)
                }}
              ></button>
            </div>
            <input className="edit" />
          </li>
        )
      }
    })
    return (
      <div>
        <section className="main">
          <input
            id="toggle-all"
            className="toggle-all"
            type="checkbox"
            checked={doneCount === total && total !== 0 ? true : false}
            onChange={this.onChange}
          />
          <label htmlFor="toggle-all">Mark all as complete</label>
          <ul className="todo-list">{li}</ul>
        </section>
      </div>
    )
  }
}
Main.propTypes = {
  list: propTypes.array,
  onDel: propTypes.func,
  changeStatus: propTypes.func,
  condition: propTypes.string,
}
